<template>
	<!-- 全局选择框 如时间 单选picker 三级联动选择 -->
	<view class="select u-position-relative" :style="style">
		<view class="u-flex-1 u-flex select-box u-row-between u-padding-left-20" :class="{'select-box-border':border}" @click="actionSheet">
			<text v-if="value">{{value}}</text>
			<text v-else :style="{color:currentThemeObj.placeholderColor}">{{placeholder}}</text>
			<view class="right-arrow-box text-color-765CFE" v-if="!disabled">
				<view class="right-arrow" :class="{'right-arrow-reverse':actionSheetShow}">
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
		</view>
		<u-select v-model="actionSheetShow" :defaultValue="defaultValue" :list="list" v-if="mode==='select'" 
		mode="mutil-column-auto" @confirm="getConfirm"  :confirm-color="currentThemeObj.primary"></u-select>
		<view v-else-if="mode==='popSelectCity'">
			<pop-city-select v-model="actionSheetShow" :cityList="list" :comfirm="comfirm"
			v-if="showRegion" @city-select="region" :defaultRegion="defaultRegion"/>
		</view>
		<u-picker v-model="actionSheetShow" :default-selector="defaultValue"
			 v-else :mode="mode" @confirm="getConfirm" :params="params" z-index="100078"></u-picker>
       
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import selectCity from '@/components/u-select/u-select.vue'
	import popCitySelect from '@/components/pop-city-select/pop-city-select.vue'
	export default {
		components: {
			selectCity,popCitySelect
		},
		props: {
			placeholder: {
				type: String,
				default: '请选择'
			},
			value:'',
			mode:{ //根据uview的mode类型匹配
				type:String,
				default:'select'
			}, 
      comfirm: {
        type:Boolean,
				default:false
      },
			valueMaxWidth:{ //显示内容的长度
				type:Number,
				default:9999
			}, 
			tips:{ //小提示
				type:String,
				default:''
			}, 
			list:{ //选项
				type:Array,
				default:()=>([])
			},
			width:{ //容器宽度
				type:[String,Number],
				default:0
			},
			//默认选中
			defaultValue:{
				type:Array,
				default:()=>([])
			},
			secondType:'',
			disabled:{
				type:Boolean,
				default:false
			},
			border:{
				type:Boolean,
				default:true
			}
		},
		computed: {
			style() {
				return this.width>0?'width:'+this.width+'rpx':'flex:1'
			}
		},
		watch:{
			actionSheetShow(){
				this.$emit('actionSheetClick',this.actionSheetShow) // 获取当前是否为打开状态(多个pop嵌套会有问题 所以通过传递事件设置蒙版是否允许点击关闭)
			}
		},
		data() {
			return {
				actionSheetShow:false,
				params:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					province: true,
					city: true,
					area: false,
					timestamp: true // 1.3.7版本提供
				},
				showRegion:false,
				defaultRegion:[]
			};
		},
		created() {
			if(this.secondType==='timeSecond'){ //年月日时分秒
				this.params = {
					...this.params,
					hour: true,
					minute: true,
					second: true
				}
			}
			if(this.secondType==='hm'){ //年月日时分
				this.params = {
					...this.params,
					hour: true,
					minute: true
				}
			}
			if(this.secondType==='hms'){ //时分秒
				this.params = {
					hour: true,
					minute: true,
					second:true
				}
			}
			if(this.secondType==='hourminute'){ //时分
				this.params = {
					hour: true,
					minute: true
				}
			}
			if(this.mode === 'popSelectCity'){
				setTimeout(()=>{
					this.defaultRegion = this.value&&this.value.split('-') || [];
					console.log(this.defaultRegion)
					this.showRegion = true
				},100)
			}
		},
		methods: {
			showPicker() {
				this.pickerFlag = !this.pickerFlag
			},
			getConfirm(item){
				if(item) this[this.mode]&&this[this.mode](item)
			},
			//select选择模式下
			select(item){
				if(Array.isArray(item)){
					const txt = item.map(val=>val.label).filter(val=>val).join('-')
					const ids = item.map(val=>val.value).filter(val=>val).join(',')
					this.getInput(txt)
					this.$emit('getIds',ids) //返回选中的id
					this.$emit('getSelect',item)
				}
			},
			//时间
			time(item){
				console.log(item)
				let format = 'YYYY-MM-DD';
				if(this.secondType==='timeSecond') format+=' HH:mm:ss'
				if(this.secondType==='hm') format+=' HH:mm'
				let time = dayjs(item.timestamp*1000).format(format)
				if(this.secondType==='hourminute') {
					time = `${item.hour}:${item.minute}`
				}
				if(this.secondType==='hms') {
					time = `${item.hour}:${item.minute}:${item.second}`
				}
				this.getInput(time)
				this.$emit('getSelect',time)
			},
			//地区
			region(item){
				const {province,city,area} = item;
				const selectCityArr = [province,city,area].filter(val=>val.id)
				const address = selectCityArr[selectCityArr.length - 1];
				if(address){
					const mergeName = address.mergeName.split(',').join("-")
					this.getInput(mergeName)
					this.$emit('getSelect',item)
				}
				
			},
			//触发双向数据绑定
			getInput(val){
				this.$emit('input',val)
			},
			actionSheet(){
				if(this.disabled) return false;
				this.actionSheetShow = true;
				
			}
		},
	}
</script>

<style lang="scss" scoped>
.select{
	margin: 0 auto;
}
.select-box-border{
	border: 1rpx solid var(--line-color);
	&.right-arrow-box{
		border-left: 1rpx solid var(--line-color);
	}
}
.select-box{
	height:64rpx ;
	border-radius: 8rpx;
	overflow: hidden;
}
.right-arrow-box{
	width: 68rpx;
	text-align: center;
}
.right-arrow{
	transition: all 0.3s;
}
.right-arrow-reverse{
	transform: rotate(180deg);
}
.value{
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
</style>
